<template>
  <el-form class="orderInfo" :label-width="labeWidth" :model="orderData">
    <el-row type="flex" v-for="(item, index) in orderInfos" :key="index">
      <template v-for="rowData in item">
        <el-col
          :span="rowData.span"
          :key="rowData.label"
          v-if="rowData.showCallback ? rowData.showCallback(orderData) : true"
        >
          <el-form-item
            :label="`${rowData.label}：`"
            :label-width="rowData.width || labeWidth"
          >
            <slot v-if="rowData.specialProp" :name="rowData.specialProp" />
            <span :class="rowData.class || ''" v-else>{{
              orderData[rowData.prop]
            }}</span>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>

<script>
export default {
  props: {
    orderData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    orderInfos: {
      type: Array,
      default: () => {
        return [];
      },
    },
    labeWidth: {
      default: "auto",
    },
  },
};
</script>

<style lang="less" scoped>
.orderInfo {
  .el-form-item {
    height: 100%;
    border: 1px solid #ccc;
    margin-right: -1px;
    margin-bottom: -1px;
  }
  /deep/.el-form-item__label {
    min-height: 40px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  /deep/.el-row {
    .el-col-24,
    .el-col-12,
    .el-col-8 {
      .el-form-item {
        border-bottom-width: 0;
      }
    }
  }
  .el-row:last-child {
    /deep/.el-col-12 {
      .el-form-item {
        border-bottom-width: 1px;
      }
    }
    /deep/.el-col-24 {
      .el-form-item {
        border-bottom-width: 1px;
      }
    }
  }
}
</style>
